<template>
  <comment-card :title="'订单量'" :value="'2,157,420'">
    <template #default>
<!--      <div id="orderChart" style="width: 100%;height: 100%"></div>-->
      <v-chart :option="options" ></v-chart>
    </template>
    <template #footer>
      <span>昨日订单量</span>
      <span class="emphasis">2,000,000</span>
    </template>
  </comment-card>
</template>

<script>
import commentCardMixin from './mixins/commentCardMixin'

export default {
  name: 'TotalOrder',
  mixins: [commentCardMixin],
  data() {
    return {
      options: {
        yAxis: {
          show: false
        },
        xAxis: {
          type: 'category',
          show: false,
          // x軸兩側邊距
          boundaryGap: false
        },
        series: [{
          type: 'line',
          data: [620, 432, 220, 210, 790, 430, 320, 532, 320, 834, 530, 220, 620],
          areaStyle: {
            color: 'purple'
          },
          lineStyle: {
            width: 0
          },
          itemStyle: {
            opacity: 0
          },
          smooth: true
        }],
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        }
      }
    }
  },
  mounted() {
    // const chartDom = document.getElementById('orderChart')
    // const chart = this.$echarts.init(chartDom)
    // chart.setOption({
    //   yAxis: {
    //     show: false
    //   },
    //   xAxis: {
    //     type: 'category',
    //     show: false,
    //     // x軸兩側邊距
    //     boundaryGap: false
    //   },
    //   series: [{
    //     type: 'line',
    //     data: [620, 432, 220, 210, 790, 430, 320, 532, 320, 834, 530, 220, 620],
    //     areaStyle: {
    //       color: 'purple'
    //     },
    //     lineStyle: {
    //       width: 0
    //     },
    //     itemStyle: {
    //       opacity: 0
    //     },
    //     smooth: true
    //   }],
    //   grid: {
    //     top: 0,
    //     bottom: 0,
    //     left: 0,
    //     right: 0
    //   }
    // })
  }

}
</script>

<style lang="scss" scoped>

</style>
